import React, { Component } from 'react'

export default class App extends Component {

  // 通过 bind 传参，接收的时候前面是传递的参数，后面是 event 事件对象
  add = function (val,event){
    console.log('1111111111111111', this);
    console.log(val);
  }

  // 只有在运行时执行一次，后期点击是无法被调用的，不能传参
  reduce = (val)=>{
    // console.log('1234567890');
    console.log(val, this);
  }

  render() {
    return (
      <div>
        <button onClick={this.add.bind(this, 10)}>事件传参 1 ------- 可以传值</button>
        {/*
          如果外部写一个函数，我们调用的时候需要执行如果加了括号，默认会在运行时执行一次
          后期的点击无法被执行
          如果不加括号的话每次点击是可以正常执行，但是没办法传递参数
        */}
        <button onClick={this.reduce(10)}>事件传参 2 --------- 不能传参</button>

        {/* 可以在点击事件中自己手动调用 reduce，此时想传什么参数直接传即可 */}
        <button onClick={()=>{
          this.reduce(100)
        }}> 事件传参 3 ---------- 可以传参 </button>

        {/*
          如果外部是一个普通函数，我们这里 this.add(1000)，那么相当于 add 函数
          是由 this 调用的，所以函数中是可以正常获取到 this 的
         */}
        <button onClick={()=>{
          this.add(1000)
        }}> 事件传参 4 --------- 可以传参 </button>

        {/*
          定义事件：
            普通函数：
              需要手动绑定 this，可以在 this 的后面加参数
              直接在事件监听的时候自己手动调用函数且传递参数
            箭头函数：
              如果直接调用传参，该函数只会被执行一次，所以无法触发多次
              直接在事件监听的时候自己手动调用函数且传递参数
        */}
      </div>
    )
  }
}
